<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'加急' + pageSubTitle" name="expedited" />
        <q-tab label="加急明细" name="expeditedLineList" />
      </q-tabs>
      <q-separator />
      <q-tab-panels :keep-alive-include="['expedited','expeditedLineList']" keep-alive v-model="showingTabPanel">
        <q-tab-panel class="q-pa-sm" name="expedited">
          <form-field-group title="主要信息" :model-with-create-update="$d.form" model-id="eId">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>是否成功</span>
                  <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12">
                  <span>错误信息</span>
                  <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
                </div>
                <div class="col-12">
                  <span>原始请求数据</span>
                  <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="expeditedLineList">
          <div class="row q-col-gutter-sm items-center q-pa-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">InbDeliveryNo</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.inbDeliveryNo" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">Material</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.material" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">ItemSD</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.itemSd" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">BillOfLading</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.billOfLading" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">STOPONo</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.stoPoNo" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div>
                <q-btn color="primary" icon="search" label="查询" @click="loadLineListData" class="col-auto" />
              </div>
            </div>
          </div>
          <q-separator />
          <q-table :columns="fpsInfo.columnsInfo" :rows="$d.lineTableData" :loading="lineListDataLoadingState"
            :visible-columns="fpsInfo.visibleColumns" v-model:pagination="fpsInfo.paginationInfo"
            color="primary" dense flat row-key="lineId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
                v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="lineListDataLoadingState" :pageNo="lineFpsReq.pageNo" :pageSize="lineFpsReq.pageSize"
                :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
                @go-to-page="fpsNav.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'Expedited'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {reactive, ref} from 'vue'
import {ExpeditedInfo, ExpeditedLine, GetExpeditedLineListReq, GetExpeditedLineListResp} from 'src/defs/ims/expedited'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'

const pageTitle = '加急'
useTitleHelper(pageTitle)

const $d = reactive({
  form: {} as ExpeditedInfo,
  lineTableData: [] as ExpeditedLine[],
})

let showingTabPanel = ref('expedited')

let loadingState = ref(false)
let serverErrorMessage = ref('')

const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<ExpeditedInfo>('/mhlbc/ims/get-expedited-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/ims/expedited',
  $d.form,
  null,
  '/ims/expedited',
  '/ims/expedited/detail',
  null,
  null,
  loadModelData,
  serverErrorMessage
)
const {
  pageSubTitle
} = detailStatus

let lineFpsReq: GetExpeditedLineListReq = reactive({
  eId: Number(detailInfo.itemId),
  itemSd: null,
  inbDeliveryNo: null,
  billOfLading: null,
  material: null,
  stoPoNo: null,
  pageSize: 40,
  pageNo: 1,
  orderBy: null,
  isDescending: false
})

let columnsInfoLine: ColumnInfo[] = [
  {
    label: '序号',
    name: 'lineId',
    field: 'lineId',
    align: 'left',
    defVisible: true,
    sortable: true,
    defOrder: 1,
  },
  {
    label: 'InbDeliveryNo',
    name: 'inbDeliveryNo',
    field: 'inbDeliveryNo',
    align: 'left',
    defVisible: true,
    defOrder: 3,
  },
  {
    label: 'Material',
    name: 'material',
    field: 'material',
    align: 'left',
    defVisible: true,
    defOrder: 4,
  },
  {
    label: 'ItemSD',
    name: 'itemSd',
    field: 'itemSd',
    align: 'left',
    defVisible: true,
    defOrder: 5,
  },
  {
    label: 'BillOfLading',
    name: 'billOfLading',
    field: 'billOfLading',
    align: 'left',
    defVisible: true,
    defOrder: 6,
  },
  {
    label: 'STOPONo',
    name: 'stoPoNo',
    field: 'stoPoNo',
    align: 'left',
    defVisible: true,
    defOrder: 7,
  },
  {
    label: 'ExpectedCompletionDate',
    name: 'expectedCompletionDate',
    field: 'expectedCompletionDate',
    align: 'left',
    defVisible: true,
    defOrder: 8,
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defVisible: true,
    defOrder: 9,
    format: (val: string,row: ExpeditedLine) => $f.fmt.userDisp(val, row.createPn)
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defVisible: true,
    defOrder: 10,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
]

let lineListDataLoadingState = ref(false)
const loadLineListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReq.orderBy = ''
      lineFpsReq.isDescending = false
    }
  }
  lineListDataLoadingState.value = true
  $f.axios
    .get<GetExpeditedLineListResp>('/mhlbc/ims/get-expedited-line-list', {params: lineFpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.lineTableData = resp.data.expeditedLines
      fpsAssist.saveFpsReq(lineFpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineListDataLoadingState.value = false
    })
}

const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/ims/expedited_line',
  null,
  null,
  null,
  lineFpsReq, columnsInfoLine,
  null,
  loadLineListData)


const fx = $f
</script>

<style scoped>

</style>
